package classes
{
	
	import UIFree.uif_styles;
	
	import UIUtils.uif_util;
	
	import flash.display.GradientType;
	import flash.text.TextFormatAlign;
	
	import flashx.textLayout.formats.TextAlign;
	
	public dynamic class c_styles extends uif_styles {
		[Embed(source='fonts/42657.ttf',
				fontName='MYFONT', unicodeRange="U+0020-U+0040, U+0410-U+044F", 
				mimeType="application/x-font", embedAsCFF=false
		)]
		public static var MYFONT: Class;
		
		private static const TAHOMA: String 	= 'tahoma';
		private static const ARIAL: String 		= 'arial';
		private static const DEFSHADOW: Object 	= {
			distance: 3,
			angle: 80,
			blurX: 5,
			blurY: 5,
			color: 0,
			strength: 2
		};
		
		private static const DEFAULTTEXTFORMAT: Object =  {
			font: ARIAL,
			size: 12,
			multiline: true,
			selectable: false
		}
		
		
		public function c_styles() {
			super();
			
			var cb: Object =  {
				buttonMode		: true,
				mouseChildren	: false
			};
			
			var buttonFill: Object = {
				colors: [0xffffee, 0x584F26],
				rotation: Math.PI / 2
			};
			
			var defShadow: Object = {
				distance: 2,
				angle: 80,
				blurX: 5,
				blurY: 5,
				color: 0,
				alpha: 0.8,
				strength: 1
			};
			
			var shadow2: Object = {
				distance: 2,
				angle: 45,
				blurX: 5,
				blurY: 5,
				color: 0,
				strength: 1.2
			}
				
			this.modalGurtain = {
				fill_color: 0x000000,
				fill_alpha: 0.8
			}
				
			this.application = {
				fill_color	: 0xEEEEFE,
				fill_alpha	: 1
			}
				
			this.imagelayer = {
				fill_color	: 0,
				fill_alpha	: 0
			}
				
			this.bar = {
				fill_color	: 0xDDDDDD,
				fill_alpha	: 1,
				line_color	: 0x1,
				line_width	: 6,
				line_alpha	: 0.05,
				filters		: {
					glow: {
						blurX	: 5,
						blurY	: 5,
						alpha	: 0.3,
						color	: 0 
					}
				}
			}
			
			this['button-glow'] = {
				line_width: 1,
				line_alpha: 0.5,
				rounds	: 12,
				margin	: 2,
				padding	: 3,
				fill_color: {
					colors: [0x884488, 0x333333],
					rotation: Math.PI / 2,
						type: 'radial',
						focalPointRatio: 0.5
				},
				text_format: {
					font: TAHOMA,
					size: 12,
					color: 0xDDDDEE,
					align: TextFormatAlign.CENTER
				},
				valign: true,
				hotspot: {
					rounds: [7, 7, 6, 6],
					fill_color: {
						colors: [0xFFFFFF, 0xFFFFFF],
						alphas: [0.9, 0.2],
						rotation: Math.PI / 2,
						type	: GradientType.RADIAL
					}
				},
				filters: {
					glow: {
						color: 0,
						alpha: 0.5,
						blurX: 5,
						blurY: 3,
						inner: true
					}
				},
				focusStyle: 'button-glow-focus'
			}				
				
			
			this['button-glow-focus'] = {
				line_alpha: 1,
				fill_color: {
					colors: [0x554400, 0xBBAA00],
					alphas: [1, 1]
				},
				filters: {
					glow: {
						color: 0xFFFFFF,
						blurX: 15,
						blurY: 15
					}
				},
				hotspot: {
					fill_color: {
						colors: [0xFFFFFF, 0xFFFFFF],
						alphas: [0.1, 0.7],
						rotation: Math.PI,
							type: GradientType.RADIAL
					}
				},
				text_format: {
					color: 0xFFFFFF
				}
			}
			
			
			this.button = merge('button-glow', {
				overClass: 'button-glow-focus',
				downClass: 'button-glow',
				arrow: 'arrow'
			});	
				
			this.mainMenu = {
				padding	: 2,
				item	: 'menuItem'
			}
				
			this.menuItem = merge('button-glow', {
				line_alpha: 0,
				fill_color: {
					colors: [0x006800, 0x00CC00],
					alphas: [0, 0]
				},
				filters: {
					glow: {
						color: 0,
						alpha: 0.6,
						blurX: 5,
						blurY: 5,
						inner: true
					}
				},
				text_format: {
					font: TAHOMA,
					size: 12,
					color: 0xDDDDEE,
					align: TextFormatAlign.LEFT
				},
				hotspot : null,
				checkedStyle: 'menuItemSelect',
				shortKeys	: 'shortKeys'
			});
			
			this.shortKeys = {
				text_format: {
					font	: TAHOMA,
					size	: 12,
					color	: 0xEEEEEE,
					align	: TextFormatAlign.RIGHT
				}				
			}
			
			this.menuItemSelect = merge('menuItem', {
				line_alpha	: 0.1
			});
			
			this.popupmenu = {
				fill_color	: 0xFFFFFF,
				fill_alpha	: 1,
				line_color	: 0x888888,
				line_width	: 1,
				rounds		: 5,
				padding		: 8,
				item		: 'menuItem',
				menuItemHeight	: 30,
				filters: {
					shadow: {
						blurX: 5,
						blurY: 5,
						distance: 3
					}
				}
			}
				
			this.dragRect = {
				line_alpha: 0.5,
				line_width: 1,
				fill_color: 0,
				fill_alpha: 0.01
			}
				
			this.handleSize = {
				line_alpha	: 0.5,
				line_width	: 1,
				fill_color	: 0xFFFFFF,
				fill_alpha	: 1,
				component	: cb
			}
				
			this.handleRoll = {
				fill_color	: 0xFFFFFF,
				fill_alpha	: 0.01,
				component	: cb
			}
				
			this.windowTitle = {
				line_width	: 2,
				line_color	: 0xFFFFFF,
				fill_color	: {
					colors: [0x888888,0xDDDDDD]
				},
				fill_alpha	: 1,
				rounds		: [10,10,0,0],
				valign		: true,
				text_format	: {
					font		: 'MYFONT',
					size		: 18,
					bold		: true,
					embedFonts	: true,
					color		: 0xFFFFFF,
					selectable	: false,
					leftMargin	: 5,
					leading		: -5
				},
				filters: {
					glow: {
						color: 0
					}
				}
			}
			
			this.window = {
				title		: 'windowTitle',
				line_width	: 1,
				line_color	: 0x5876B2,
				fill_color	: 0xEEEEEE,
				fill_alpha	: 1,
				rounds		: 14,
				padding		: 5,
				filters		: {
					shadow: DEFSHADOW
				},
				tabBox		: 'tabBox'
			}
				
			this.desc = {
				text_format: {
					font: ARIAL,
					size: 11,
					wordWrap: true,
					selectable: false
				}
			}
				
			this.description = merge('desc', {
				line_width: 1,
				line_color: 0xCCCDDD,
				rounds: 6,
				maring: 2,
				padding: 8,
				valign: true
			});
			
			this.cross = {
				line_width	: 2,
				margin		: 3,
				padding		: 3,
				component	: cb,
				filters:{
					shadow: DEFSHADOW
				},
				round: {
					line_width: 2,
					line_color: 0xFFFFFF,
					fill_color: 0,
					fill_alpha: 0.5
				}
			}
			
			this.closeButton = merge('cross', {
				line_color: 0xFFFFFF
			})
				
//LIST
			this.list = {
				line_width	: 1,
				line_alpha	: 0.5,
				rounds		: 5,
				fill_color	: 0xFFFFFF,
				fill_alpha	: 1,
				buttonSize	: 30,
				padding		: 5,
				margin		: 2,
				buttonClass	: 'listButton',
				itemClass	: 'listItem',
				selectClass	: 'listItemSelect',
				inputClass	: 'slInput'
			}
			
			this.slInput = {
				line_width: 1,
				line_alpha: 0.5,
				margin: 5,
				text_format: {
					font: ARIAL,
					size: 12
				}
			}
			
			this.listItem = {
				fill_color: {
					colors: [0xFFFFFF, 0xFFFFFF]
				},
				padding: 2,
				rounds: 4,
				text_format: uif_util.union(DEFAULTTEXTFORMAT, {
					wordWrap: true,
					color: 0x333444
				}),
				filters: {}
			}
			
			this.listItemFocus = uif_util.union(this.listItem, {
				fill_color: {
					colors: [0x002233, 0x5977B3]
				},
				text_format: {
					color: 0xFFFFFF
				}
			});
			
			this.listItemSelect = uif_util.union(this.listItem, {
				fill_color: {
					colors: [0x008899, 0x55CCFF]
				},
				text_format: {
					color: 0xFFFFFF
				},
				filters: {
					glow: {
						color: 0,
						alpha: 0.3,
						blurX: 2,
						blurY: 2,
						inner: true
					}
				}
			})
			
			this.listButton = uif_util.union(this.button, {
				padding	: 6,
				margin	: 3,
				rounds	: 6
			});
			
			this.layerItem = uif_util.union(this.listItem, {
			});
			
			this.titleProp = {
				text_format: uif_util.union(DEFAULTTEXTFORMAT, {
					color: 0xFFFFFF
				}),
				filters: {
					shadow: {
						color: 0,
						distance: 1,
						blurX: 2,
						blurY: 2
					}
				}
			}
			
			this.property = {
				titleHeight: 17,
				title: 'titleProp',
				fill_color: 0xAAAAAA,
				fill_alpha: 1,
				rounds: 8,
				padding: 1,
				margin: 3,
				filters: {
					glow: {
					}
				}
			}
				
			this.scrollHandle = {
				line_width: 1,
				line_color: 0x334455,
				line_alpha: 1,
				fill_color: 0xFFFFFF,
				fill_alpha: 1,
				filters: {
					shadow: {
						distance: 1,
						angle: 45,
						blurX: 2,
						blurY: 2,
						color: 0,
						strength: 1
					}
				}
			}
			
			this.barClass = {
				line_width: 1,
				line_color: 0,
				line_alpha: 1,
				fill_color: 0x444444,
				fill_alpha: 0.8
			}
			
			this.scrollbar = {
				line_width: 1,
				line_alpha: 0.1,
				rounds: 6,
				fill_color: 0xFFFFFF,
				fill_alpha: 1,
				buttonSize: 25,
				padding: 3,
				handleClass: 'scrollHandle',
				barClass: 'barClass'
			}
				
			this.previewColor = uif_util.union(this.windowTitle, {
				draw_method: 'draw_circle' 
			});
			
			this.frame = {
				line_width: 2,
				line_color: 0xFFFFFF
			}
			
			this.paletteCtrl = {
				fill_color		: 0,
				fill_alpha		: 1,
				padding			: 8,
				margin			: 5,
				palette			: 'white',
				previewColor	: 'previewColor',
				posField		: 'frame'
			};
			
			this.limb = {
				fill_color	: 0xFFFFDD,
				fill_alpha	: 1,
				line_width	: 1,
				line_alpha	: 0.3,
				padding		: 2
			};
			
			this.direct = {
				fill_color	: 0xFFFFFF,
				fill_alpha	: 1,
				line_width	: 2,
				line_alpha	: 1,
				padding		: 10,
				filters: {
					shadow: {
						distance: 2,
						alpha: 0.4
					}
				}
			};
			
			this.directControl = {
				limb	: 'limb',
				direct	: 'direct',
				info	: 'desc',
				margin	: 5
			}
				
			this.info = {
				text: {
					text_format: {
						color: 0x444444,
						font: ARIAL,
						multiline: true,
						selectable: false,
						size: 11,
						align: TextAlign.RIGHT
					},
					line_width: 1,
					line_alpha: 0.5,
					fill_color: 0xFFFFFF,
					fill_alpha: 0.6,
					margin		: 5
				}
			}
				
			this['combobox-list'] = {
				fill_color: 0x222222,
				fill_alpha: 0.8,
				padding: 5
			}
			
			this['arrow'] = this.merge('buttonDef', {
				fill_color: 0x00AA00,
				fill_alpha: 1
			})
			
			this['combobox-item'] = this.merge('buttonDef', {
				fill_alpha: 1,
				fill_color: 0x222222,
				text_format: {
					color: 0xFFFFFF,
					font: ARIAL,
					selectable: false,
					size: 11
				},
				component: cb
			})

			this['combobox-item-select'] = this.merge('combobox-item', {
				fill_color: 0x445533
			});
			
			this['combobox-button'] = this.merge('buttonDef', {
				arrow: 'arrow',
				fill_color: 0x222222,
				fill_alpha: 0.4,
				rounds: [0, 9, 9, 0],
				padding: 6
			})
			
			this.combobox = {
				'list-class': 'combobox-list',
				'button-class': 'combobox-button',
				'item-class': 'combobox-item',
				'select-item-class': 'combobox-item-select',
				'list-height': 405,
				padding	: 2,
				margin	: 2,
				rounds	: 10,
				fill_color: {
					colors: [0x444444, 0],
					alphas: [.5, .5],
					rotation: 90
				},
				fill_alpha: 1,
				text_format: {
					color: 0xFFFFFF,
					font: ARIAL,
					selectable: false,
					size: 13
				}
			}
				
			this.checkbox = {
				text_format: {
					font: 'arial',
					size: 13,
					multiline: true,
					selectable: false
				},
				hotspot: {
					margin: 4,
					rounds: 2,
					line_width: 2,
					line_color: 0xFFFFFF, 
					fill_color: {
						colors: [0xFFFFFF, 0xFFFFFF],
						rotation: Math.PI / 2
					},
					fill_alpha: 1,
					filters:{
						glow: {
							blurX: 2,
							blurY: 2
						}
					}
				},
				checkedStyle: 'checkboxChecked'
			}
			
			this.checkboxChecked = uif_util.union(this.checkbox, {
				hotspot: uif_util.union(this.checkbox.hotspot, {
					fill_color: {
						colors: [0x33FF33, 0x004400]
					}
				})
			});
			
//TABS			
			this.tabBox = {
				tab_class: 'tab',
				tab_height: 25,
				tabitem_class: 'tabItem_unselect',
				layer_class: 'tab',
				itemslayer_class: 'items',
				item_class: 'userPhoto'
			}
				
			this.tabBlock = {
				margin: 2,
				padding: 5,
				rounds: 6,
				fill_color: {
					rotation: Math.PI / 2,
						colors: [0xFFFFFF, 0xE5EEFF],
						alphas: [1, 1]
				},
				fill_alpha: 1,
				valign: true,
				text_format: {
					color: 0,
					font: ARIAL,
					size: 11,
					wordWrap: true,
					align: 'center'
				},
				filters: {
					shadow: defShadow
				}
			}
				
			this.tabItem = merge('tabBlock', {
				fill_color: 0xEEEEEE,
				padding: 0,
				valign: true,
				component: cb,
				text_format: {
					color: 0,
					font: ARIAL,
					size: 11,
					wordWrap: true,
					align: 'center'
				}
			})
			
			this.tabItem_unselect = merge('tabItem', {
				fill_color: 0x222333,
				fill_alpha: 1,
				text_format: {
					color: 0xCCEEFF,
					font: ARIAL,
					size: 11,
					wordWrap: true,
					align: 'center'			
				},
				filters: {}
			})
			
			this.photo = {
				line_width: 1,
				line_color: 0x5876B2,
				fill_color: 0xFFFFFF,
				fill_alpha: 1,
				rounds: 0,
				padding: 3,
				margin: 2,
				filters: {}
			}
				
			this.userPhoto = merge('photo', {
			});
			
			this.userPhoto_select = merge('tabBlock', {
			});
				
			this.tab = {
				arrow	: 'farrow',
				area	: 'tabArea',
				select	: 'tabItem',
				unselect: 'tabItem_unselect'
			}
			
			this.items = {
				arrow		: 'farrow',
				area		: 'tabArea',
				select		: 'userPhoto_select',
				unselect	: 'userPhoto'
			}
			
			this.tabArea = {
			}
			
			this.tabArrow = {
				line_width: 1,
				fill_color: 0x555666,
				fill_alpha: 1,
				component: cb
			}
			
			this.arrow = {
				line_width:1, 
				line_color: 0xFFFFFF, 
				fill_color: 0x5977B3,
				fill_alpha: 1,
				orientation: 3,
				filters: {
					shadow: shadow2
				}
			};
			
			this.arrowFocus = merge('arrow', {
				fill_color: 0x00FF00,
				fill_alpha: 1
			});
			
			this.farrow = {
				padding: 4,
				arrow: 'arrow',
				component: cb
			}
				
			this.hint = {
				fill_color: 0xFFFFFF,
				fill_alpha: 1,
				line_color: 0,
				line_alpha: 1,
				line_width: 1,
				rounds: 10,
				padding: 10,
				arrowSize: 15,
				text_format: {
					font: TAHOMA,
					size: 9,
					color: 0x666788,
					align: 'center',
					wordWrap: true,
					leading: -2,
					selectable	: false
				},
				filters: {
					shadow: defShadow
				}
			}
				
			this.assistantArea = {
				assistant: 'assistant'
			}
			
			this.assistant = {
				line_width: 1
			}
					
			this.playPanel = merge('tabBlock', {
				margin: 2,
				padding: 2,
				rounds: 6
			});
				
			this.playButton = {
				fill_color	: 0xFFFFFF,
				fill_alpha	: 0.2,
				margin		: 3,
				padding		: 4,
				component	: cb,
				filters:{
					shadow: DEFSHADOW
				},
				path: {
					line_width	: 2
				}
			}
				
			this.progressBar = {
				fill_color	: 0xFFFFFF,
				fill_alpha	: 0.2,
				line_width	: 1,
				margin		: 5,
				component	: cb,
				bar: {
					fill_color	: 0x333333,
					fill_alpha	: 0.5,
					padding		: 3
				}
			}	
		}
	}
}